<template>
	<view class="main">

		<u-navbar title="" :fixed="true" bgColor="rgba(255,255,255,0)" :autoBack="true"
			leftIconColor='rgba(255,255,255,1)'>
		</u-navbar>

		<image class="w-100vw" mode="widthFix" src="@/static/images/zhaoshang1.png"></image>
		<view class="relative">
			<image class="w-100vw" mode="widthFix" src="@/static/images/zhaoshang2.png?v=2">
			</image>
			<view class="absolute z-10 flex-between-center fw-600 fs-40 fuzhi">
				<view class="w-50v">加盟微信</view>
				<view class="flex-y-center w-100v">
					<view class="fuzhititle text-hidden-1">{{hehuoren_wx}}</view>
					<text class="siconfont icon-fuzhi fs-40" @click="copyBtn(hehuoren_wx)"></text>
				</view>

			</view>
		</view>
		<view class="relative">
			<image class="w-100vw" mode="widthFix" src="@/static/images/zhaoshang3.png?v=2">
			</image>
			<view class="absolute z-10 flex-between-center fw-600 fs-40 fuzhi fuzhi1">
				<view class="w-50v">加盟微信</view>
				<view class="flex-y-center w-100v">
					<view class="fuzhititle text-hidden-1">{{pingtai}}</view>
					<text class="siconfont icon-fuzhi fs-40" @click="copyBtn(pingtai)"></text>
				</view>
			</view>
		</view>

		<view class="pb-safe" v-if="audit_status == -1">
			<view class="confirmbtn" @click="confirm">立即提交申请</view>
			<view class="bottomspace"></view>
		</view>
		<view class="pb-safe" v-if="audit_status == 0">
			<view class="confirmbtn" @click="confirm">审核中</view>
			<view class="bottomspace"></view>
		</view>
		<view class="pb-safe"v-if="audit_status == 1">
			<view class="confirmbtn">恭喜您成为{{promotion_info.cooperation_type_text}}服务商</view>
			<view class="bottomspace"></view>
		</view>

		<u-popup :show="showconfirm" @close="showconfirm=false" mode="bottom" round="10" :closeable="true">
			<view class="p-20 pb-60">
				<view class="fs-30 mx-20">提交资料，等待工作人员和您联系</view>
				<view class="bg-info-2 p-20 m-20 rd-16 my-30">
					<u--input placeholder="请输入您的姓名" v-model="form.username" inputAlign="right"
						class="bg-info-1 h-60 mb-20">
						<u--text text="您的姓名" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
					</u--input>

					<u--input placeholder="请输入您的电话" v-model="form.mobile" inputAlign="right"
						class="bg-info-1 h-60 mb-20">
						<u--text text="您的电话" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
					</u--input>

					<view class="mb-20 flex-between-center bg-info-1 rd-8 px-20 fs-28"
						style="border:1rpx solid #dadbde;" @click="showyixiang=true">
						<view class="c-999">您意向合作</view>
						<view class="flex-between-center rd-16 h-40 p-20" @click="showsort=true">
							<view class="c-bbb mr-10">{{ selectedModeText }}</view>
							<text class="siconfont icon-xiangyou1 c-999 rotate-90"></text>
						</view>
					</view>

					<u--input placeholder="请输入您意向的区域" v-model="form.region" inputAlign="right" class="bg-info-1 h-60 mb-20">
						<u--text text="您意向的区域" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
					</u--input>
					
			
					<u--input placeholder="拒绝原因" disabled v-if="form.recover_msg" v-model="form.recover_msg" inputAlign="right"
						class="bg-info-1 h-60 mb-20">
						<u--text text="拒绝原因" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
					</u--input>

				</view>

				<view class="mt-30 text-center" v-if="audit_status == -1 || audit_status == 2">
					<view class="shadow_button" @click="submitForm">确定</view>
				</view>
				<view class="mt-30 text-center" v-if="audit_status == 0">
					<view class="shadow_button">审核中，请耐心等到</view>
				</view>
			</view>

			<!-- 意向合作弹窗 -->
			<u-picker title="您的合作意向" :show="showyixiang" @cancel="showyixiang=false" :columns="yunyingcolumns"
				@confirm="confirmyixiang" @close="showyixiang=false"></u-picker>


		</u-popup>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		components: {

		},
		data() {
			return {
				showconfirm: false,
				showyixiang: false,
				hehuoren_wx: '',
				pingtai: '',
				yunyingcolumns: [],
				form: {
					username: '',
					mobile: '',
					cooperation_type: 0,
					region: '',
					recover_msg:''
				},
				cooperationTypeMap: {}, // 存储原始的合作类型映射 {1: "区县", 2: "小区"}
				selectedModeText: '请选择合作意向', // 显示文本
				// 新增：存储文本到ID的映射
				textToIdMap: {},
				audit_status:-1
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo
			}),
		},
		onLoad(opt) {
			this.promotionInfo()
		},
		onShow() {

		},

		onHide() {

		},
		methods: {
			//获取配置信息
			promotionInfo() {
				var that = this
				that.$httpApi.promotionInfo().then((res) => {
					if (res.code == 1) {
						that.hehuoren_wx = res.data.hehuoren_wx
						that.pingtai = res.data.pingtai
						if(res.data.promotion_info){
							that.form = res.data.promotion_info
							that.audit_status = res.data.promotion_info.status;
							that.selectedModeText = res.data.promotion_info.cooperation_type_text;
						}
						
						// 处理合作类型数据格式转换
						if (res.data.cooperation_type) {
							that.cooperationTypeMap = res.data.cooperation_type;

							// 创建文本到ID的映射
							that.textToIdMap = {};
							for (let key in res.data.cooperation_type) {
								that.textToIdMap[res.data.cooperation_type[key]] = parseInt(key);
							}
							// 格式化数据用于显示
							that.yunyingcolumns = that.formatCooperationType(res.data.cooperation_type);
							
						}
					}
				})
			},
			formatCooperationType(cooperationType) {
				// 将对象 {1: "区县", 2: "小区"} 转换为 [["区县", "小区"]]
				const values = Object.values(cooperationType);
				return [values];
			},
			// 根据显示文本获取对应的ID
			getModeIdByText(text) {
				for (let key in this.cooperationTypeMap) {
					if (this.cooperationTypeMap[key] === text) {
						return parseInt(key);
					}
				}
				return 0;
			},
			// 复制
			copyBtn(txt) {
				uni.setClipboardData({
					data: txt,
					success: function() {
						console.log('success');
					}
				});
			},
			confirm() {
				// 立即提交申请
				this.showconfirm = true;
			},
			confirmyixiang(e) {
				if (e.value && e.value[0]) {
					const selectedText = e.value[0];
					this.selectedModeText = selectedText;
					// 根据文本获取对应的ID
					this.form.cooperation_type = this.textToIdMap[selectedText] || 0;
				}
				this.showyixiang = false;
			},

			// 提交表单
			submitForm() {
				// 表单验证
				if (!this.form.username) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return;
				}

				if (!this.form.mobile) {
					uni.showToast({
						title: '请输入电话',
						icon: 'none'
					});
					return;
				}

				if (!this.form.cooperation_type) {
					uni.showToast({
						title: '请选择合作意向',
						icon: 'none'
					});
					return;
				}
				if (!this.form.cooperation_type) {
					uni.showToast({
						title: '请选择合作意向',
						icon: 'none'
					});
					return;
				}
				if(!this.form.region){
					uni.showToast({
						title: '请填写区域',
						icon: 'none'
					});
					return;
				}
				// 这里添加提交表单的逻辑
				// 示例：调用API提交数据
				this.$httpApi.promotionSubmit(this.form).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
						this.showconfirm = false;
						// 重置表单
						this.resetForm();
					} else {
						uni.showToast({
							title: res.msg || '提交失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				});
			},

			// 重置表单
			resetForm() {
				this.form = {
					username: '',
					mobile: '',
					cooperation_type: 0,
					region: ''
				};
				this.selectedModeText = '请选择合作意向';
			}

		},
	}
</script>

<style lang="less">
	.main {
		width: 100%;
		min-height: 100%;
		background: url('@/static/images/beijing_y@2x.png') no-repeat;
		background-size: 100%;

		.fuzhi {
			background: #FFEBDA;
			padding: 15rpx 20rpx;
			border-radius: 8rpx;
			left: 60rpx;
			right: 60rpx;
			bottom: 60rpx;
			white-space: nowrap;

			.fuzhititle {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 40rpx;
				background: linear-gradient(90deg, #FA7911 0%, #E32B27 100%);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				padding-right: 20rpx;
				width: 80%;
				text-align: center;

			}
		}

		.fuzhi1 {
			bottom: 40rpx;
		}

		.confirmbtn {
			background: linear-gradient(180deg, #FFFFFF 0%, #FEAF2F 100%);
			border-radius: 20rpx;
			font-family: Inter, Inter;
			font-weight: 900;
			font-size: 40rpx;
			color: #8A470A;
			text-align: center;
			padding: 30rpx;
			margin: 30rpx;
		}

		.bottomspace {
			padding-bottom: 100rpx;
			background: #e82306;
		}
	}
</style>